<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="short icon" href="../../front/images/28.jpg">
<link rel="stylesheet" href="../css/layui.css" media="all">
</head>
<body>
	<br />
	<form class="layui-form" action="" style="width: 100%;margin-left: 400px;margin-top: 100px" >
		<div class="layui-form-item">
			<label class="layui-form-label">账号</label>
			<div class="layui-input-inline" style="width: 50%">
				<input type="text" name="userName" lay-verify="userName"
					   placeholder="请输账号" autocomplete="off" class="layui-input" id="userName">
			</div>
			<div class="layui-form-mid layui-word-aux">请输入账号</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">新密码</label>
			<div class="layui-input-inline" style="width: 50%">
				<input type="password" name="password" lay-verify="pass"
					placeholder="请输入新密码" autocomplete="off" class="layui-input"
					id="newPwd">
			</div>
			<div class="layui-form-mid layui-word-aux">请填写6到16位新密码</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">确认密码</label>
			<div class="layui-input-inline" style="width: 50%">
				<input type="password" name="password" lay-verify="pass"
					placeholder="请再次输入新密码" autocomplete="off" class="layui-input"
					id="rePwd" onfocusout="outFocus()">
			</div>
			<div class="layui-form-mid layui-word-aux alertRight">请再次填写6到16位的新密码</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">验证码</label>
			<div class="layui-input-inline" style="width: 10%">
				<input type="text" name="yzm"
					   placeholder="请输入验证码" autocomplete="off" class="layui-input" id="yzm">
			</div>
			<button type="button" class="layui-btn getYzmBtn"  style="background-color:green" onclick="getYzm()">获取验证码</button>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button type="submit" class="layui-btn" lay-submit=""
					lay-filter="demo1">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>

	<script src="../js/jquery-3.4.1.min.js" charset="utf-8"></script>
	<script src="../js/show-dialog.js" charset="utf-8"></script>
	<script type="text/javascript" src="../js/layui.all.js" charset="utf-8"></script>
	<script>
layui.use(['form', 'layedit', 'laydate'], function(){
	var form = layui.form,
	layer = layui.layer,
	layedit = layui.layedit,
	laydate = layui.laydate;
	
	// 自定义验证规则
	form.verify({
		pass: [/^[\S]{6,12}$/, '密码必须6到16位，且不能出现空格...']
	});


	
  
	// 监听提交
  	form.on('submit(demo1)', function(data){
		let emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/; //注意中间不能有空格
		//let res = emailReg.test(email);
  		let pwd = $("#newPwd").val();
  		let rePwd = $("#rePwd").val();
  		let yzm = $("#yzm").val();
		let userName = $("#userName").val();
		if(userName == null || userName == "" || userName == "undefined"){
			layer.alert(JSON.stringify(), {
				title: '请输入账号!'
			})

		}

		$.post("/user/update",{userName:userName,pwd:pwd,yzm:yzm},rt=>{
			console.log(rt)
			if(rt.code == 510){
				showmsg("验证码错误","red");
				return;
			}else if(rt.code == 200){
				showmsg("修改成功...正在跳转到登陆界面","green",function(){
					location.href="../login.html"
				})
  	  		}else{
				showmsg("修改失败请稍后再试","red");
				return;
			}
		},"json");
  	  		
		return false;
	});
});

function getYzm(){
	let pwd = $("#newPwd").val();
	let rePwd = $("#rePwd").val();
	let userName = $("#userName").val();
	if(userName == null || userName == "" || userName == "undefined" || pwd == null || pwd == "" || pwd == "undefined" || rePwd == null || rePwd == "" || rePwd == "undefined"){
		layer.alert(JSON.stringify(), {
			title: '请完整输入信息!'
		})
	}

	if(pwd != rePwd){
		alert("两次密码输入不一致")
		return
	}

	let wait = 60;
	let start = setInterval(function(){
		wait--;
		if(wait == 0){
			$(".getYzmBtn").html("获取验证码");
			$(".getYzmBtn").attr("disabled",false);
			$(".getYzmBtn").css("background-color","green");
			//$("#regE").attr("disabled",false);
			clearInterval(start)
			return;
		}else{
			$(".getYzmBtn").html(wait);
			$(".getYzmBtn").attr("disabled",true);
			$(".getYzmBtn").css("background-color","grey");
			//$("#regE").attr("disabled",true);
		}
	},1000);

	$.post("/user/getCode",{userName:userName},rt=>{
		if(rt.code == 523 || rt.code == "523"){
			alert("未找到该用户信息")
			clearInterval(start)
		}
	},"json");


}

function outFocus(){
	let pwd = $("#newPwd").val();
	let rePwd = $("#rePwd").val();
	if(pwd != rePwd){
		$(".alertRight").css("background-color","red")
		$(".alertRight").text("两次输入密码不一致")
	}else{
		$(".alertRight").css("background-color","white")
		$(".alertRight").text("密码验证成功")
	}
}
</script>
</body>
</html>